import { Component, OnInit } from '@angular/core';

interface Address {
  province: string;
  city: string;
}

@Component({
  selector: 'user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit{

  // Angular 自定义组件

  name: string;
  address: Address;
  showSkills: boolean;
  skills: string[];

  constructor() {
    this.name = 'yxrswx';
    this.address = {
      province: '山西',
      city: '运城'
    };
    this.showSkills = true;
    this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
  }

  ngOnInit() {
  }

  toggleSkills() {
    this.showSkills = !this.showSkills;
  }

  addSkill(skill: string) {
    let skillStr = skill.trim();
    if (this.skills.indexOf(skillStr) === -1) {
      this.skills.push(skillStr);
    }
  }

  // 管道

  birthday = new Date(1988, 3, 15); // April 15, 1988
  toggle = true; // start with true == shortDate

  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
  toggleFormat() { this.toggle = !this.toggle; }

  // 测试自定义管道

  power = 2;
  factor = 10;
}
